/*
 * uCharts (R)
 * 高性能跨平台图表库
 * Copyright (c) 2021 QIUN (R) 秋云 https://www.ucharts.cn All rights reserved.
 * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
 * 复制使用请保留本段注释，感谢支持开源！
 */

Component({
  properties: {
    chartType: {
      type: String,
      value: 'line'
    },
    chartData: {
      type: Object,
      value: {
        categories: [],
        series: []
      },
      observer: function(newVal, oldVal) {
        this.drawChart();
      }
    },
    opts: {
      type: Object,
      value: {}
    }
  },
  data: {
    canvasId: 'uChart'
  },
  lifetimes: {
    attached() {
      const canvasId = `uChart${Math.random().toString(36).substr(2, 10)}`;
      this.setData({ canvasId });
    }
  },
  methods: {
    drawChart() {
      const { chartType, chartData, opts } = this.properties;
      const { canvasId } = this.data;
      const ctx = wx.createCanvasContext(canvasId, this);
      
      // 基本配置
      const config = {
        type: chartType,
        canvas2d: false,
        context: ctx,
        width: opts.width || 375,
        height: opts.height || 250,
        categories: chartData.categories || [],
        series: chartData.series || [],
        animation: true,
        background: '#FFFFFF',
        padding: [15, 15, 15, 15],
        enableScroll: false,
        ...opts
      };

      this.triggerEvent('ready', { canvas: ctx, width: config.width, height: config.height });

      // 绘制图表
      ctx.beginPath();
      ctx.setFillStyle(config.background);
      ctx.fillRect(0, 0, config.width, config.height);
      ctx.closePath();
      
      // 根据不同图表类型绘制
      switch(chartType) {
        case 'line':
          this.drawLine(ctx, config);
          break;
        case 'bar':
          this.drawBar(ctx, config);
          break;
        // 可以添加更多图表类型
      }
      
      ctx.draw();
    },

    drawLine(ctx, config) {
      const { width, height, padding, categories, series } = config;
      const [paddingTop, paddingRight, paddingBottom, paddingLeft] = padding;
      
      const drawWidth = width - paddingLeft - paddingRight;
      const drawHeight = height - paddingTop - paddingBottom;
      
      if (series.length === 0 || categories.length === 0) return;
      
      // 计算坐标轴
      const xStep = drawWidth / (categories.length - 1);
      const yMax = Math.max(...series.map(item => Math.max(...item.data)));
      const yMin = Math.min(...series.map(item => Math.min(...item.data)));
      const yStep = drawHeight / (yMax - yMin);
      
      // 绘制折线
      series.forEach(serie => {
        ctx.beginPath();
        ctx.setStrokeStyle(serie.color || '#1890FF');
        ctx.setLineWidth(2);
        
        serie.data.forEach((value, index) => {
          const x = paddingLeft + index * xStep;
          const y = height - paddingBottom - (value - yMin) * yStep;
          
          if (index === 0) {
            ctx.moveTo(x, y);
          } else {
            ctx.lineTo(x, y);
          }
        });
        
        ctx.stroke();
        ctx.closePath();
      });
    },

    drawBar(ctx, config) {
      const { width, height, padding, categories, series } = config;
      const [paddingTop, paddingRight, paddingBottom, paddingLeft] = padding;
      
      const drawWidth = width - paddingLeft - paddingRight;
      const drawHeight = height - paddingTop - paddingBottom;
      
      if (series.length === 0 || categories.length === 0) return;
      
      // 计算柱状图参数
      const barCount = categories.length;
      const seriesCount = series.length;
      const barWidth = (drawWidth / barCount / seriesCount) * 0.8;
      const yMax = Math.max(...series.map(item => Math.max(...item.data)));
      const yStep = drawHeight / yMax;
      
      // 绘制柱状图
      series.forEach((serie, serieIndex) => {
        ctx.setFillStyle(serie.color || '#1890FF');
        
        serie.data.forEach((value, index) => {
          const x = paddingLeft + (index * seriesCount + serieIndex) * barWidth * 1.25;
          const y = height - paddingBottom - value * yStep;
          const barHeight = value * yStep;
          
          ctx.fillRect(x, y, barWidth, barHeight);
        });
      });
    }
  }
}); 